<template>
  <el-table max-height="500px" v-loading="loading" v-adaptive border :data="tableList" empty-text="暂时没有数据哟">
    <el-table-column label="序号" prop="id" width="80px" align="center" type="index"></el-table-column>
    <el-table-column label="变前积分" prop="before" align="center" :show-overflow-tooltip="true"></el-table-column>
    <el-table-column label="变动积分" prop="integral" align="center" :show-overflow-tooltip="true"></el-table-column>
    <el-table-column label="变后积分" align="center" :show-overflow-tooltip="true">
      <template #default="scope">
        {{ scope.row.before + scope.row.integral }}
      </template>
    </el-table-column>
    <el-table-column label="订单号" prop="order_no" align="center" :show-overflow-tooltip="true"></el-table-column>
    <el-table-column label="变动事由" prop="remark" align="center" :show-overflow-tooltip="true"></el-table-column>
    <el-table-column
      label="变动时间"
      width="180px"
      prop="created_at"
      align="center"
      :show-overflow-tooltip="true"
    ></el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination
    background
    v-model:current-page="searchParams.pageNo"
    v-model:page-size="searchParams.pageSize"
    v-show="total > 0"
    :page-sizes="[10, 20, 50, 100, 200]"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total"
    @size-change="handleListPage"
    @current-change="handleListPage"
  />
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { integralRecord } from "@/api/user/user/index.ts";
// 查询参数
const searchParams = ref({
  pageNo: 1, // 第几页
  pageSize: 10 // 每页显示多少条
});

// 定义参数的类型
interface IComponentProps {
  member_id?: any;
}

// 子组件接收父组件的值
// withDefaults：设置默认值  defineProps：接收父组件的参数
const props = withDefaults(defineProps<IComponentProps>(), {
  member_id: null
});
const tableList = ref([]);
const loading = ref(false);
const total = ref(0);
const handleListPage = () => {
  loading.value = true;
  tableList.value = []; // 重置表格数据
  integralRecord({ id: props.member_id })
    .then(res => {
      tableList.value = res.data.records;
      total.value = res.data.total;
    })
    .finally(() => {
      loading.value = false;
    });
};
onMounted(() => {
  handleListPage();
});
</script>

<style lang="scss" scoped></style>
